<template>
  <div class="com-table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="(item, index) in tableConfig.columns" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
        <template slot-scope="scope">
          <div v-if="item.type === 'tools'">
            <span v-for="(items, index2) in item.btns" :key="index2" @click="items.clickFn ? items.clickFn(scope.row, $event) : ''" v-text="items.label"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      tableConfig: Object
    },
    data () {
      return {
        tableData: [
          { name: '张三', age: 20, address: '白芒村', job: '财务', city: '北京' },
          { name: '李四', age: 23, address: '六约村', job: '软件开发', city: '深圳' },
          { name: '王五', age: 30, address: '大和村', job: '销售', city: '上海' }
        ]
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        let params = {
          limit: 10,
          pages: 1
        }
        console.log(this.tableConfig.url)
        this.$api[this.tableConfig.url](params).then(res => {
          if (!res) return
          this.tableConfig = res.data
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>